import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import app from '../../App.module.css';
export default class index extends Component {
    state={
        step:'noResult',
        data:[]
    }
    componentDidMount(){
         this.token=PubSub.subscribe('MY TOPIC', (_,data) => { 
            this.setState(data)
         });
    }
    componentWillUnmount(){
        PubSub.unsubscribe(this.token)
    }
  render() {
    const { step,data } = this.state
    return (
        <div className={app.body}>
            <h1 style={{display:step==='noResult'?'block':'none'}}>Enter name to search</h1>
            <h5 style={{display:step==='loading'?'block':'none'}}>Loading result</h5>
            <div  style={{display:step==='result'?'block':'none'}} >
                <div className={app.container}>
                {
                    data.map(i=>{
                        return <a key={i.id} href={i.html_url}>
                                <div  className={app.item}>
                                <div className={app.itemAvatar}>
                                    <img className={app.avatarStyle} src={i.avatar_url} alt="" />
                                </div>
                                <div className={app.userName}>{i.login}</div>
                            </div>
                        </a>
                        
                    })
                }
                </div>
            </div>
        </div>
    )
  }
}
